<template>
  <el-drawer title="建议内容" size="500px" :with-header="false" :visible.sync="drawer">
    <div class="advice-box">
      <div class="advice-add">
        <div class="advice-title">稽核项目配置</div>
        <el-form ref="ruleForm" :model="form" :rules="rules" label-position="right" label-width="80px">
          <el-form-item label="标准名称" prop="checkName">
            <el-select
              v-model="form.checkName"
              style="width: 300px;"
              filterable
              clearable
              :disabled="messageType === 'check'"
              remote
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="remoteMethod"
              :loading="loading"
              value-key="checkTableId"
              @change="changeCheckName">
              <el-option
                v-for="item in standardList"
                :key="item.checkTableId"
                :label="item.checkName"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目名称" prop="projectName">
            <div class="project-select" @click="selectProject" :class="messageType === 'check' ? 'name-disabled' : ''">
              <span>
                <span v-if="form.projectName" style="color: #606266; ">{{form.projectName}}</span>
                <span v-else style="color:#C8CBD2;">请选择项目名称</span>
              </span>
              <span v-if="form.projectName && messageType === 'add'" class="icon" style="color: #C0C4CC;" @click.stop="clearProject"><i class="el-icon-circle-close"></i></span>
            </div>
          </el-form-item>
          <el-form-item
            label="合格标准"
            prop="passingScore">
            <el-input class="modal-w" placeholder="请输入内容" v-model="form.passingScore" clearable></el-input>
          </el-form-item>
          <el-form-item label="适用角色" prop="roleIdList">
            <div>
              <div v-for="(item, index) in form.roleIdList" class="role-option">
                <div style="margin-bottom: 10px;">
                  <el-select  class="modal-w" v-model="form.roleIdList[index]" clearable filterable placeholder="请选择角色">
                    <el-option
                      v-for="role in roleList"
                      :key="role.value"
                      :label="role.name"
                      :value="role.value">
                    </el-option>
                  </el-select>
                </div>
                <div class="audit-icon">
                  <i style="cursor: pointer;" class="el-icon-circle-plus-outline" @click="addRole()"></i>
                  <i style="cursor: pointer;" class="el-icon-remove-outline" @click="removeRole(index)"></i>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="稽核频次" prop="countPerPeriod">
            <div style="display: flex;flex-direction: row;">
              <el-input
                class="modal-w"
                placeholder="请输入次数"
                style="width: 125px"
                v-model.number="form.countPerPeriod"
              />
              <span style="padding: 0 8px">次/每</span>
              <el-select  class="modal-w" v-model="form.checkPeriod" style="width: 125px" filterable clearable placeholder="请选择单位">
                <el-option
                  v-for="role in dateList"
                  :key="role.value"
                  :label="role.name"
                  :value="role.value">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="advice-submit">
        <el-button type="primary" @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit">确认</el-button>
      </div>
    </div>
    <ProjectConfigModal ref="projectConfigRef" @update="changeProject" />
  </el-drawer>
</template>
<script>
import ProjectConfigModal from './projectConfigModal.vue'
import { isNumber } from '@/utils/validate'
import { addProjectApi } from '@/api/auditManagement/projectConfig'
import { editProjectApi } from '@/api/auditManagement/projectConfig'
import { getAuditList} from '@/api/auditManagement/audit'
export default {
  name: 'addModal',
  components: { ProjectConfigModal },
  props: ['roleList'],
  data() {
    const validatorScore = (rule, value, callback) => {
      if(!value) {
        callback(new Error('请输入分值'));
      }
      if(!isNumber(value)) {
        callback(new Error('只能输入数值'));
      }
      callback()
    }
    const validatorCount = (rule, value, callback) => {
      if(!value) {
        callback(new Error('请输入稽核频次'));
      }
      if(!isNumber(value) || value > 100 || value < 1) {
        callback(new Error('只能输入1-100整数'));
      }
      callback()
    }
    const validatorRole = (rule, value, callback) => {
      value.forEach(item => {
        if(!item) {
          callback(new Error('请选择角色'));
        }
      })
      callback()
    }
    return {
      drawer: false,
      loading: false,
      projectList: [],
      messageData: {},
      historyMessage: [],
      standardList: [],
      form: {
        projectName: '',
        checkName: '',
        checkTableName: '',
        checkPeriod: 'daily',
        checkTableId: '',
        countPerPeriod: 1,
        passingScore: 90,
        projectCheckTableId: '',
        projectId: '',
        roleIdList: ['']
      },
      dateList:[
        { name: '天', value: 'daily' },
        { name: '周', value: 'weekly' },
        { name: '月', value: 'monthly' },
      ],
      messageType: 'add',
      rules: {
        countPerPeriod: [
          { required: true, validator: validatorCount, trigger: 'blur' }
        ],
        checkName: [
          { required: true, message: '请输入标准名称', trigger: 'blur' }
        ],
        passingScore: [
          { required: true, validator: validatorScore,  trigger: 'blur' }
        ],
        projectName: [
          { required: true, message: '请选择项目名称', trigger: 'blur' }
        ],
        roleIdList: [
          { required: true, validator: validatorRole, trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    init(data){
      this.drawer = true
      if(data) {

        this.messageType = 'check'
        this.form.checkPeriod = data.checkPeriod
        this.form.checkTableId = data.checkTableId
        this.form.checkName = data.checkName
        this.form.checkTableName = data.checkName
        this.form.countPerPeriod = data.countPerPeriod
        this.form.passingScore = data.passingScore
        this.form.projectCheckTableId = data.projectCheckTableId
        this.form.projectId = data.projectId
        this.form.projectName = data.projectName
        this.form.roleIdList = []
        this.roleList.forEach(item => {
          if(data.optRoleNameList.includes(item.name)){
            this.form.roleIdList.push(item.value)
          }
        })
      } else {
        this.form.checkName = ''
        this.form = this.$options.data().form
        this.messageType = 'add'
      }
      if(this.$refs.ruleForm) {
        this.$refs.ruleForm.clearValidate()
      }
    },
    changeProject(item){
      this.form.projectId = item.value
      this.form.projectName  = item.name
      this.$refs.ruleForm.validateField('projectId')
    },
    addRole() {
      this.form.roleIdList.push('')
    },
    selectProject(){
      if(this.messageType === 'check') {
        return
      }
      this.$refs.projectConfigRef.getInit()
    },
    clearProject(){
      this.form.projectName = ''
    },
    remoteMethod(query){
      let params = {
        pageSize: 10,
        pageNum: 1,
        tableName: query
      }
      this.loading = true
      getAuditList(params).then(res => {
        this.standardList = res.rows
        this.loading = false
      })
    },
    changeCheckName(item){
      this.form.checkTableId = item.checkTableId
      this.form.checkTableName = item.checkName
      this.form.checkName = item.checkName
    },
    removeRole(index) {
      if(this.form.roleIdList.length === 1){
        return
      }
      this.form.roleIdList.splice(index, 1)
    },
    cancel() {
      this.drawer = false
    },
    submit() {
      this.$refs.ruleForm.validate(valid => {
        if(valid) {
          this.form.passingScore = parseFloat(this.form.passingScore)
          this.form.projectId = parseInt(this.form.projectId)
          if(this.messageType === 'add') {
            addProjectApi(this.form).then(res => {
              this.$emit('update')
              this.drawer = false
            })
          } else {
            editProjectApi(this.form).then(res => {
              this.$emit('update')
              this.drawer = false
            })
          }
        }
      })
    },
  }
}
</script>
<style scoped lang="scss">
.advice-box{
  position: relative;
  padding: 20px;
  height: 100%;
  overflow: auto;
  .config-right{
    padding: 0 20px;
  }
  .advice-title{
    font-weight: bold;
    font-size: 18px;
    margin: 20px 0 15px 0;
  }
  .history-box{
    margin-top: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid #bfbfbf;
    padding: 10px;
    border-radius: 5px;
    background: #bfbfbf;
  }
  .advice-submit{
    margin: 20px 0;
    text-align: center;
  }
  .role-option{
    display: flex;
    flex-direction: row;
  }
  .modal-w{
    width: 300px;
  }
  .audit-icon{
    width: 60px;
    text-align: center;
    font-size: 30px;
    color: #00afff;
  }
  .project-select{
    width: 300px;
    height: 34px;
    background: #FFFFFF;
    border-radius: 5px;
    color: #C0C4CC;
    padding: 0 20px;
    cursor: pointer;
    border: 1px solid #DCDFE6;
    position: relative;
    overflow: hidden;
    .icon{
      position: absolute;
      right: 5px;
      top: 0;
    }
  }
  .name-disabled{
    cursor: not-allowed;
    background: #F5F7FA;
    color: #C0C4CC;
  }
}
</style>
